<template>
  <el-container>
    <el-header>
      <AppointmentHeader></AppointmentHeader>
    </el-header>
    <el-main>
      <PersonMsg v-if="flag==1"></PersonMsg>
      <VaccineMessage :vaccineMsg="vaccineMsg" v-if="flag==2"></VaccineMessage>
      <ConfirmMessage :confirm="vaccineMsg" :userForm="userFrom" v-if="flag==3"></ConfirmMessage>
    </el-main>
  </el-container>
</template>

<script>
import AppointmentHeader from "@/components/AppointmentHeader";
import VaccineMessage from "@/components/VaccineMessage";
import PersonMsg from "@/components/PersonMsg";
import ConfirmMessage from "@/components/ConfirmMessage";
export default {
  name: "Appointment",
  components:{
    AppointmentHeader,
    PersonMsg,
    VaccineMessage,
    ConfirmMessage
  },
  data(){
    return{
      flag:1,
      vaccineMsg:{
        vname:this.$route.params.vname,
        vmsg:this.$route.params.vmsg,
        vid:this.$route.params.vid,
        flag:this.$route.params.flag
      },
      userFrom:{
        name: '',
        phone:'',
        telephone:'',
        gender: '',
        province:'',
        city:'',
        region:''
      }
    }
  },
  mounted() {
    this.$bus.$on("NextStep",(flag,current,form)=>{
      if (flag === 'person'){
        this.flag=2
        this.userFrom.name=form.name
        this.userFrom.phone=form.phone
        this.userFrom.telephone=form.telephone
        this.userFrom.gender=form.gender
        this.userFrom.province=form.province
        this.userFrom.city=form.city
        this.userFrom.region=form.region
      }else{
        this.vaccineMsg.vmsg = form.msg
        this.vaccineMsg.vname = form.name
        this.flag=3
      }
    })

    this.$bus.$on("beforeStep",(flag,current,form)=>{
      if (flag === 'vaccine'){
        this.flag=1
      }
      if (flag === 'confirm'){
        this.flag=2
      }
    })
  }
}
</script>

<style scoped>

</style>
